<template>
	<view class="index">
		<!-- <view class="wx-nav">
				<view class="iconfont icon-icon-test4"></view>
			<text>
				黑马商城
			</text>
			<view class="iconfont icon-icon-test1"></view>
		</view> -->
		<scroll-view scroll-x="true" class='scroll-content' :scroll-into-view='scrollIntoIndex'>
			<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='index'
				@tap='changeTab(index)'>
				<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>

		<indexSwiper></indexSwiper>
		<Icons></Icons>
		<!-- <banner></banner> -->
		<Recommend></Recommend>
		<Card></Card>
		<dityList></dityList>

	</view>
</template>

<script>
	import indexSwiper from '@/components/index/indexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import dityList from '../../components/common/dityList.vue'
	import banner from '../../components/index/banner.vue'
	import Icons from '@/components/index/Icons.vue'
	export default {
		data() {
			return {
				//选中的索引
				topBarIndex: 0,
				//顶栏跟随的索引id值
				scrollIntoIndex: 'top0',
				//内容块的高度值
				clentHeight: 0,
				//顶栏数据
				topBar: [{
						name: '推荐'
					},
					{
						name: '运动户外'
					},
					{
						name: '服饰内衣'
					},
					{
						name: '鞋靴箱包'
					},
					{
						name: '美妆个护'
					},
					{
						name: '家居数码'
					},
					{
						name: '食品母婴'
					}
				]
			}
		},
		methods: {
			changeTab(index) {
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = 'top' + index;
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			}
		},
		components: {
			indexSwiper,
			Recommend,
			Card,
			dityList,
			banner,
			Icons
		},
		onLoad() {
			uni.request({
				url: "http://127.0.0.1:3306///api/getcomments/:artid",
				method: 'get',
				success: res => {
					console.log(res.data);
				}
			})
		},
		// onReady() {

		// 	let view = uni.createSelectorQuery().select(".home-data");
		// 	view.boundingClientRect(data => {
		// 		this.clentHeight = data.height;
		// 	}).exec();

		// },
	}
</script>

<style scoped>
	@import "@/static/iconfont.css";

	/* .wx-nav{
	text-align: center;
	height: 200rpx;
	width: 100%;
	line-height: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
} */
	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}
</style>